

<template>
<div>
  <div class="header-height"></div>
  <div class="w-1200 py-8 nav">
    <NBreadcrumb>
      <NBreadcrumbItem>
        <NuxtLink :to="localePath('/')">{{ $t('homePage') }}</NuxtLink>
      </NBreadcrumbItem>
      <NBreadcrumbItem>
        <NuxtLink :to="localePath('/news')">{{ $t('africanVideo') }}</NuxtLink>
      </NBreadcrumbItem>
      <NBreadcrumbItem>
        <p>{{ locale == 'zh' ? articleData.title : articleData.titleEn}}</p>
      </NBreadcrumbItem>
    </NBreadcrumb>
  </div>
  <div class="w-1200 py-8">
    <p class="title">{{ locale == 'zh' ? articleData.title : articleData.titleEn}}</p>
    <NSpace class="article-footer">
      <span class="">{{dayjs(articleData.createTime).format('YYYY-MM-DD')}}</span>
<!--      <span class="">{{$t('source')}}：{{locale== 'zh'? articleData.source: articleData.sourceEn}}</span>-->

      <span class="flex items-center"><NIcon :component="EyeOutline" size="20px"></NIcon> {{articleData.viewsCount}} {{$t('viewsCount')}}</span>
    </NSpace>
    <video class="video" controls :src="articleData.videoUrl">

    </video>
  </div>
 </div>
</template>
<script setup lang="ts">
import {NBreadcrumb, NBreadcrumbItem, NSpace,NIcon} from "naive-ui";
import {getVideo} from "~/api/video";
const dayjs = useDayjs()
const {locale} = useI18n()
const localePath = useLocalePath()

import {EyeOutline} from '@vicons/ionicons5'
const router = useRoute()
const articleData = ref<any>({
  title: '',
  titleEn: '',
  content: '',
  contentEn: '',
  viewsCount: 0,
  source: '',
  sourceEn: ''
})

getVideo({
  id: router.params.id
}).then( (res: any) => {
  articleData.value = res
})
</script>
<style scoped>
.title{
  color: rgba(16, 16, 16, 1);
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}
.article-footer{
  color: #9A9A9A;
  font-size: 14px;
  margin-bottom: 40px;
}
</style>
